<template>
  <div class="search-house-page">
    <SearchList class="search-box"></SearchList>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1"  title="区域" ref="area">
        <van-picker show-toolbar :columns="areaList" @cancel="cancelArea" @confirm="completeArea"/>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2"  title="方式" ref="way">
        <van-picker show-toolbar :columns="wayList" @cancel="cancelWay" @confirm="completeWay" />
      </van-dropdown-item>
      <van-dropdown-item v-model="value3"  title="租金" ref="rent">
        <van-picker show-toolbar :columns="rentList" @cancel="cancelRent" @confirm="completeRent"/>
      </van-dropdown-item>
      <van-dropdown-item v-model="value4"  title="筛选" @open="show=true">
      </van-dropdown-item>
    </van-dropdown-menu>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="popup_zu">
        <dl>
          <dt>户型</dt>
          <dd>
            <span v-for="item in roomType" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>朝向</dt>
          <dd>
            <span v-for="item in oriented" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>楼层</dt>
          <dd>
            <span v-for="item in floor" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <dl>
          <dt>房屋亮点</dt>
          <dd>
            <span v-for="item in characteristic" @click="addHour(item)" :class="{actire:item.checked}" :key="item.value">{{item.label}}</span>
          </dd>
        </dl>
        <div class="btnbottom">
          <van-button type="default" @click="quxiao">
            取消
          </van-button>
          <van-button type="primary" @click="submit"> 确认 </van-button>
        </div>
      </div>
    </van-popup>
      <MyrentVue
      v-for="item in list"
      :key="item.index"
      :item="item"
    ></MyrentVue>
  </div>
</template>

<script>
import MyrentVue from '@/components/MyrentVue.vue'
import SearchList from '@/components/SearchList.vue'
import { getCityValueToken } from '@/utils/storage'
import { getMyrentlist, GETConditions } from '@/api/rent'

export default {
  components: { MyrentVue, SearchList },
  data () {
    return {
      list: [],
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      columns: [
        {
          text: '区域',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区', children: [{ text: '西湖' }] }, { text: '余杭区', children: [{ text: '西湖' }] }]
            },
            {
              text: '温州',
              children: [{ text: '鹿城区', children: [{ text: '西湖' }] }, { text: '瓯海区', children: [{ text: '西湖' }] }]
            }
          ]
        }
      ],
      wayList: [],
      rentList: [],
      areaList: [],
      show: false,
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: []
    }
  },
  async created () { // 获取数据
    const res = await GETConditions(getCityValueToken())
    console.log(res)
    // 处理数据
    this.areaList.push(res.body.area, res.body.subway)
    this.areaList[0] = { text: res.body.area.label, children: res.body.area.children }
    this.areaList[0].children = this.changeArea(this.areaList[0])
    this.areaList[1] = { text: res.body.subway.label, children: res.body.subway.children }
    this.areaList[1].children = this.changeArea(this.areaList[1])
    res.body.rentType.forEach(item => this.wayList.push(item.label))
    res.body.price.forEach(item => this.rentList.push(item.label))
    console.log(this.areaList)
    this.roomType = res.body.roomType
    this.oriented = res.body.oriented
    this.floor = res.body.floor
    this.characteristic = res.body.characteristic

    const { body } = await getMyrentlist()
    // console.log(body)
    this.list = body
    // console.log(body)
  },
  methods: {
    changeArea (obj) {
      const arr = []
      obj.children.forEach(item => {
        const arr1 = []
        item.children
          ? item.children.forEach(item => arr1.push({ text: item.label, children: item.children }))
          : arr1.push({ text: '不限', value: null })
        item.children = arr1
        arr.push({ text: item.label, children: item.children })
      })
      obj.children = arr
      return arr
    },
    cancelArea () {
      this.$refs.area.toggle()
    },
    completeArea (val) {
      console.log(val)
    },
    cancelWay () {
      this.$refs.way.toggle()
    },
    completeWay (val) {
      console.log(val)
    },
    cancelRent () {
      this.$refs.rent.toggle()
    },
    completeRent (val) {
      console.log(val)
    },
    addHour () {},
    submit () {},
    quxiao () {
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>

::v-deep .van-overlay {
  position: relative;
  .van-popup {
    position: absolute;
  }
}

.dropdown {
::v-deep .cell {
    height: 200px !important;
    width: 300px !important;
    padding-bottom: 280px;
    padding-top: 40px;
    .van-grid {
      margin: 5px 0px !important;
      margin-left: 30px !important;
      .van-grid-item__content {
        width: 70px !important;
        padding: 0px 0px !important;
        border: solid 1px RGB(221, 221, 221);
        margin: 1px 7px;
        border-radius: 10%;
        height: 25px;
      }
    }
  }
}

.active {
  ::v-deep div {
    border: solid 1px RGB(33, 185, 122) !important;
    background-color: RGB(222, 250, 239);
    color: RGB(33, 185, 122) !important;
  }
::v-deep .van-grid-item__text {
    color: RGB(33, 185, 122) !important;
  }
}

::v-deep.van-dropdown-menu__title--active {
  color: RGB(33, 185, 122) !important;
}

::v-deep .btn {
  .van-hairline {
    color: RGB(33, 185, 122) !important;
    background-color: #fff !important;
    width: 150px !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
.van-dropdown-menu {
    position: sticky;
    z-index: 99;
  }
.popup_zu {
    padding-top: 20px;
    .btnbottom{
      position: sticky;
      bottom: 0;
      z-index: 999;
    }
    dl{
      padding: 0 20px;
    dt {
      margin: 20px 0;
    }
    dd {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;
      margin-left: 30px;
      span {
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        color: #888;
      }
    }
    }
  }
</style>
